<template>
  <div>
    <transition name="fade" mode="out-in">
        <router-view/>
    </transition>
    
    <div class="bottom">
        <van-tabbar route>
           <van-tabbar-item replace to="/shouye" icon="wap-home-o">首页</van-tabbar-item>
           <van-tabbar-item replace to="/fenlei" icon="apps-o">分类</van-tabbar-item>
           <van-tabbar-item replace to="/qianggou" icon="shop-collect-o">爆爆团</van-tabbar-item>
           <van-tabbar-item replace to="/dingdan" icon="description">订单</van-tabbar-item>
           <van-tabbar-item replace to="/wode" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
  </div>
</div>
 
</template>

<script>
export default {
   
}
</script>

<style scoped lang="scss">
.bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    >a{
        line-height: 30px;
        text-decoration: none;
        color: #000;
    }
    .router-link-exact-active{
        color: skyblue;
    }

}
// 入场动画
.fade-enter{//动画开始
   opacity: 0;
  // transform: scale(0);
  transform: rotate(30deg);
  // transform: scale(0) rotate(0deg);
  transform: translateX(-10);
}
.fade-enter-active{
    transition: all 0.3s;
}
.fade-enter-to{//动画结束
   opacity: 1;
  // transform: scale(0);
  transform: rotate(-30deg);
  // transform: scale(0) rotate(0deg);
  transform: translateX(10);
}

// 离场动画
.fade-leave{//动画开始
    opacity: 1;
    transform: translateY(-10);
}
.fade-leave-active{
    transition: all 0.3s;
}
.fade-leave-to{//动画结束
    opacity: 0;
    transform: translateY(10);
}
</style>